class Banner {
    constructor(ele) {
        this.ele = $(ele);
        this.oBox = this.ele.find('.box');
        //轮播的图片
        this.oImg = this.oBox.find('div');
        //下面的点
        this.oDots = this.ele.find('li');
        //左右翻页
        this.oPrev = this.ele.find('.prev');
        this.oNext = this.ele.find('.next');

        this.w = this.ele.innerWidth();
        console.log(this.w);
        this.index = 0;
        this.t = null;
        this.flag = true;
        this.autoPlay() ;
        this.click()
    }
    autoPlay() {
        this.t = setInterval(() => {
            
            this.index++;
            this.flag = false;
            this.oBox.animate({
                'left': - this.index * this.w
            }, () => {
                this.flag = true;
                if (this.index === this.oImg.length - 1) {
                    this.index = 0;
                    this.oBox.css('left', 0);
                }
            })
            console.log(this.index);
            if (this.index === this.oImg.length - 1) {
                this.oDots.removeClass('show').eq(0).addClass('show');
            } else {
                this.oDots.removeClass('show').eq(this.index).addClass('show');
            }

        }, 4000)
        $(window).on('mouseout', ()=>{
            clearInterval(this.t);
        });
    }


    click() {
        this.oPrev.on('click', () => {
            if (this.flag) {
                clearInterval(this.t)
                if (this.index == 0) {
                    this.index = this.oImg.length - 1;
                    this.oBox.css('left', -this.index * this.w)
                }

                this.index--;
                this.flag = false;
                this.oBox.animate({
                    'left': - this.index * this.w
                    
                }, () => {
                    this.flag = true;
                    this.autoPlay();
                   
                })
                if (this.index === this.oImg.length - 1) {
                    this.oDots.removeClass('show').eq(0).addClass('show');
                } else {
                    this.oDots.removeClass('show').eq(this.index).addClass('show');
                }

                
            }
        })

        this.oNext.on('click', () => {
            if (this.flag) {
                clearInterval(this.t)
                if (this.index == this.oImg.length - 1) {
                    this.index = 0;
                    this.oBox.css('left', -this.index * this.w)
                }

                this.index++;
                this.flag = false;
                this.oBox.animate({
                    'left': - this.index * this.w
                }, () => {
                    this.flag = true;
                    this.autoPlay();
                })
                if (this.index === this.oImg.length - 1) {
                    this.oDots.removeClass('show').eq(0).addClass('show');
                } else {
                    this.oDots.removeClass('show').eq(this.index).addClass('show');
                }
            }
        })

        const _this = this;

        this.oDots.on('click', function () {

            // 事件处理函数   this是指向小点
            // console.log($(this).index());

            if (_this.flag) {
                clearInterval(_this.t);
                _this.index = $(this).index();



                _this.oBox.animate({
                    'left': - _this.index * _this.w
                }, () => {
                    _this.flag = true;
                    _this.autoPlay();
                })
                if (_this.index === _this.oImg.length - 1) {
                    _this.oDots.removeClass('show').eq(0).addClass('show');
                } else {
                    _this.oDots.removeClass('show').eq(_this.index).addClass('show');
                }
            }
        })
    }

   


}
